<template>
	<view>
		<view class="phone">
			<text>手机号</text>
			<view class="input-box" style="display: flex;">
				<view style="display: flex; align-items: center; width: 140rpx">
					<view @click="show = !show" style="font-weight: 400; font-size: 30rpx; color: #222222">{{ num }}
					</view>

					<image src="/static/login/downicon.png"
						style="width: 24rpx; height: 24rpx; margin-left: 12rpx; margin-right: 30rpx" mode=""></image>
				</view>
				<view class="areanum" v-if="show">
					<view class="numitem" @click="choosenum(item)" v-for="(item, index) in areanum">{{ item }}</view>
				</view>
				<input v-model="oldPhone" type="text" placeholder="請輸入手機號" />
			</view>
		</view>

		<view class="phone">
			<text>验证码</text>
			<view class="input-box1" style="display: flex;">
				<view class="info-item-input"><input type="number" placeholder="请输入验证码" placeholder-class="placeholder"
						maxlength="11" v-model="captcha" /></view>
				<view class="countdown" v-if="countdown && countdown > 0">{{countdown}}秒</view>
				<view class="send-code" @click="getCode()" v-else>获取验证码</view>
			</view>
		</view>

		<view class="btnbox" @click="setname">
			登录
		</view>
	</view>
</template>

<script>
	import ikz from '@/pages/Common/tools.js'
	export default {
		data( ) {
			return {
				areanum: [ '+852', '+853', '+86' ],
				show: false,
				num: '+86',
				oldPhone: '',
				countdown: 0,
				captcha: ''
			};
		},
		onLoad( ) {
			this.getPhone( )
		},
		methods: {
			getPhone( ) {
				var path = '/xyb/user_wechat/mobile';
				var data = {};
				ikz.get( path, data, res => {
					console.log( res, '手机号' );
					if ( res.statusCode == 200 ) {
						this.oldPhone = res.data.data.mobile
						console.log( "旧手机号是", this.oldPhone );
					} else {
						uni.showModal( {
							title: '提示',
							content: '服务器繁忙，请稍后再试',
							showCancel: false,
							success: function( res ) {}
						} );
					}

				} );
			},
			// 获取验证码
			getCode( ) {
				if ( this.oldPhone == '' ) {
					uni.showToast( {
						title: "请先填写手机号后获取验证码",
						icon: "none",
						duration: 2000,
					} )
					return
				}

				var path = '/Sms/send';
				var data = {
					mobile: this.oldPhone
				};
				ikz.requestPost( path, data, res => {
					if ( res.data.code == 1 ) {
						uni.showToast( {
							title: "验证码已发送",
							icon: "none",
							duration: 2000,
						} )
						clearInterval( this.interval )
						this.countdown = 60
						this.interval = setInterval( ( ) => {
							if ( this.countdown <= 1 ) {
								clearInterval( this.interval )
								this.countdown = 0
							} else this.countdown--
						}, 1000 )
					} else {
						uni.showToast( {
							title: res.data.msg,
							icon: "none",
							duration: 2000,
						} )
					}

				} );
			},
			setname( ) {
				let title = ''
				if ( title ) {
					uni.showToast( {
						title,
						icon: 'none',
						duration: 2000,
					} )
				} else {
					let path = '/user/mobilelogin'
					let data = {
						mobile: this.oldPhone,
						captcha: this.captcha
					}
					ikz.requestPost( path, data, res => {
						
						console.log(res.data.data.userinfo,'shouji');
						if ( res.data.code == 1 ) {
							let title = '登录成功'
							let user_info = {
								mobile: res.data.data.userinfo.mobile,
								agent_area: res.data.data.userinfo.agent_area,
								nickname: res.data.data.userinfo.nickname,
								avatar: res.data.data.userinfo.avatar,
							}
							uni.setStorageSync( "user_info", user_info )
							uni.setStorageSync( 'local_user_session', res.data.data.userinfo.token );
							getApp( ).globalData.mobile = res.data.data.userinfo.mobile
							uni.showToast( {
								title,
								icon: 'none',
							} )
							setTimeout( ( ) => {
								uni.reLaunch( {
									url: '/pages/login/setxiaoqu/setxiaoqu',
								} )
							}, 2000 )
						} else {
							uni.showToast( {
								title: res.data.msg,
								icon: "none",
								duration: 2000
							} )
						}
					} )
				}
			}
		},
	}
</script>

<style lang="scss">
	.phone {
		box-sizing: border-box;
		display: flex;
		// align-items: center;
		flex-direction: column;
		width: 100%;
		height: 194rpx;
		position: relative;
		padding: 22rpx 30rpx;
		box-sizing: border-box;

		text {
			margin-bottom: 20rpx;
			height: 44rpx;
			font-weight: 500;
			font-size: 30rpx;
			color: #222222;
			text-align: left;
		}

		.input-box1 {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 690rpx;
			height: 100rpx;
			background: #F7F7F7;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			// margin-top: 20rpx;
			padding: 0 24rpx;
			box-sizing: border-box;

			.send-code {
				font-size: 28rpx;
				line-height: 40rpx;
				color: #247EFF;
			}

			.areanum {
				position: absolute;
				width: 100rpx;
				height: 200rpx;
				background-color: #ffffff;
				bottom: -200rpx;
				z-index: 99;

				.numitem {
					font-size: 30rpx;
					padding: 10rpx 10rpx;
				}
			}
		}

		.input-box {
			display: flex;
			align-items: center;
			width: 690rpx;
			height: 100rpx;
			background: #F7F7F7;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			// margin-top: 20rpx;
			padding: 0 24rpx;
			box-sizing: border-box;


			.areanum {
				position: absolute;
				width: 100rpx;
				height: 200rpx;
				background-color: #ffffff;
				bottom: -200rpx;
				z-index: 99;

				.numitem {
					font-size: 30rpx;
					padding: 10rpx 10rpx;
				}
			}
		}


	}

	.btnbox {
		width: 690rpx;
		height: 88rpx;
		background: #247EFF;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		// margin-top: 180rpx;
		font-weight: 400;
		font-size: 30rpx;
		line-height: 88rpx;
		color: #FFFFFF;
		text-align: center;
		margin: 180rpx auto;
	}
</style>